<template>
  <div class="pie-main" id="box" ref="dom"></div>
</template>

<script>
import echarts from "echarts";
import tdTheme from "./theme.json";
import { on, off } from "./util";
echarts.registerTheme("tdTheme", tdTheme);
export default {
  props: {
    value: Array,
    text: String,
    subtext: String
  },
  mounted() {
    this.initChart();
  },
  methods: {
    resize() {
      this.dom.resize();
    },
    initChart() {
      this.$nextTick(() => {
        let legend = this.value.map(_ => _.name);
        let option = {
          title: {
            text: this.text,
            subtext: this.subtext,
            x: "center"
          },
          position: {
            top: 40
          },
          tooltip: {
            trigger: "item",
            formatter: "{c} ({d}%)",
            // position: ['30%', '90%'],
            position: function(point, params, dom, rect, size) {
              let leftWidth = size.viewSize[0] / 2 - size.contentSize[0] / 2;
              return { left: leftWidth, bottom: 0 };
            },
            backgroundColor: "transparent",
            textStyle: {
              fontSize: 24,
              color: "#666"
            }
          },
          legend: {
            // orient: 'vertical',
            top: 0,
            data: legend,
            backgroundColor: "transparent",
            icon: "circle"
          },
          series: [
            {
              name: "人员统计",
              type: "pie",
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: "inner"
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: "24"
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: this.value
            }
          ]
        };
        this.dom = echarts.init(this.$refs.dom, "tdTheme");
        this.dom.setOption(option);
        on(window, "resize", this.resize);
      });
    }
  },
  watch: {
    value: function(newQuestion, oldQuestion) {
      this.initChart();
    }
  }
};
</script>

<style>
.pie-main {
  width: 100%;
  height: 360px;
  padding: 28px;
  background: #fff;
}
</style>
